<!-- 首页 -->
<template>
	<div class="home">
		<!-- 左侧-侧边栏 -->
		<div class="content-left">
			<div class="content-left-item">
				<div class="content-title">文件数据总览</div>
				<div class="literal flex-wrap">
					<div :key="item" class="file-item flex-row row-center-center" v-for="item in lengerd">
						<i class="el-icon-document"></i>
						<div class="flex-column">
							<div class="literal-file">{{item}}</div>
							<div class="literal-base">200 个</div>
						</div>
					</div>
				</div>
			</div>
			<div class="content-left-item">
				<div class="content-title">BIM人才培养</div>
				<div class="literal">
					<div class="cultivate row-center-center">
						<div class="cultivate-left">
							<div class="literal-file">培训人数</div>
							<div class="literal-base">200 个</div>
						</div>
						<div class="cultivate-right">
							<div class="literal-file">累计开展培训人数</div>
							<div class="literal-base">200 个</div>
						</div>
					</div>
					<div class="charts">
						<LineCharts :value="value"></LineCharts>
					</div>
				</div>
			</div>
			<div class="content-left-item">
				<div class="content-title">精品工程</div>
				<div class="literal boutique row-center-center">
					<div class="boutique-left">
						<img :src="leftImage" />
					</div>
					<div class="boutique-right">
						<div :class="index === isEngActive &&'boutique-right-active'" :key="index" class="boutique-right-item" v-for="(item,index) in delicateImage">
							<img :src="item" />
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 地图 -->
		<Map :mapOptions="mapOptions"></Map>
		<!-- 右侧-侧边栏 -->
		<div class="content-right">
			<div class="content-right-item">
				<div class="content-title">BIM获奖统计</div>
				<div class="literal circleCharts">
					<CircleCharts :colors="title" :title="{ name: '总计', value: circleValue.value }" name="站点数量" unit="个"></CircleCharts>
				</div>
			</div>
			<div class="content-right-item">
				<div class="content-title">BIM获奖情况</div>
				<div class="literal row-center-center">
					<div :key="index" class="winningStatue" v-for="(item,index) in winningStatueList">
						<span class="winningStatueSpan">{{item.id}}</span>
						<i class="el-icon-trophy"></i>
						<div>{{item.name}}</div>
						<div>{{item.value}}</div>
					</div>
				</div>
			</div>
			<div class="content-right-item">
				<div class="content-title">BIM获奖照片</div>
				<div class="literal winningPhoto row-between">
					<div class="winningPhoto-item"></div>
					<div class="winningPhoto-item"></div>
					<div class="winningPhoto-item"></div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
// import Line from '@/components/common/Charts/Line.vue'
export default {
  data() {
    return {
      mapOptions: {
        mapStyle: "amap://styles/darkblue", //地图颜色
        showLabel: false, //隐藏地图文字标记
        // zoomEnable: false, //禁止地图拖拽
        // dragEnable: false, //禁止地图放大缩小
      },
      lengerd: ['文件总数', '累计查看', '累计下载数', '累计访问', '累计贡献文件', '审核通过'],
      value: [
        { name: 'aaa', value: 11111, value2: 22222 },
        { name: 'bbb', value: 22222, value2: 22222 },
        { name: 'ccc', value: 555, value2: 22222 },
      ],
      circleName: '直接访问',
      circleValue: [
        { value: 335, name: '直接访问' },
        { value: 310, name: '邮件营销' },
        { value: 234, name: '联盟广告' },
        { value: 135, name: '视频广告' },
        { value: 1548, name: '搜索引擎' }
      ],
      delicateImage: [
        'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic_360_360%2F92%2F69%2F9d%2F92699dfebec7af164c81596afe4ff735.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1640680109&t=041d04dcdbdeecf4283deb9a6933f587',
        'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic_source%2F53%2F0a%2Fda%2F530adad966630fce548cd408237ff200.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1640680069&t=1ed7d4a1172c318394a9a5f822cf0f8d',
        'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.2008php.com%2F09_Website_appreciate%2F10-07-11%2F1278861720_g.jpg&refer=http%3A%2F%2Fwww.2008php.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1640680139&t=3d60bc63b039c682a4e85fc5293a9ee0',
        'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F945cad7c7105d352aa3c513c94846bb0c2f1a61342067-OWFZcE_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1640680161&t=ade08ec9e85c1ef897811defe1347fa3'
      ],
      leftImage: '',
      isEngActive: 0,
      title: ['#FFEA2C', '#E59B2A', '#E56D2A', '#392AE5', '#2a80e5'],
      winningStatueList: [{
        id: 1,
        name: '广东省',
        value: 'BIM应用大赛'
      }, {
        id: 1,
        name: '广东省',
        value: 'BIM应用大赛'
      }, {
        id: 1,
        name: '广东省',
        value: 'BIM应用大赛'
      },
      ]
    }
  },
  mounted() {
    this.changeLeftImage();
  },
  destroyed() {
    if (this.changeLeftImage) {
      clearInterval(this.changeLeftImage);
    };
  },
  methods: {
    changeLeftImage() {
      let index = 0;
      setInterval(() => {
        this.isEngActive = index + 1
        if (index < this.delicateImage.length - 1) {
          index++
        } else if (index === this.delicateImage.length - 1) {
          index = -1
          return
        }
        this.leftImage = this.delicateImage[index]
      }, 1000);
    }
  },
}
</script>

<style lang="scss" scoped>
.home {
	color: #fff;
	height: 100%;
	width: 100%;
	.content-left {
		position: absolute;
		top: 100px;
		bottom: 5vh;
		left: 0;
		width: 25vw;
		z-index: 99;
		&-item {
			height: 27vh;
			margin: 0 2vh 0 2vh;
			.content-title {
				// height: 3vh;
				line-height: 3vh;
				font-size: 14px;
				text-indent: 1.5em;
				background: url('~@assets/images/homeImages/homeTitle.png') no-repeat;
			}
			.literal {
				height: 22vh;
				padding: 30px 20px;
				background: url('~@assets/images/homeImages/border.png') no-repeat;
				background-size: 100% 100%;
				box-sizing: border-box;
				text-align: center;
				// "文件数据总览"样式
				.file-item {
					font-size: 12px;
					width: 33.33%;
					.el-icon-document {
						font-size: 18px;
						width: 40px;
						height: 40px;
						text-align: center;
						line-height: 40px;
						border-radius: 50%;
						background-color: rgba(42, 128, 230, 0.4);
						position: relative;
						// background: url('~@assets/images/homeImages/homeContent.png');
						// background: url('~@assets/images/homeImages/homeContent1.png') no-repeat center;
						&::after {
							content: '';
							position: absolute;
							top: 50%;
							left: 50%;
							z-index: -1;
							transform: translate(-50%, -50%);
							width: 30px;
							height: 30px;
							text-align: center;
							line-height: 30px;
							border-radius: 50%;
							background-color: #2a80e5;
						}
					}
				}
				// "BIM人才培养"样式
				.cultivate {
					font-size: 12px;
					height: 5vh;
					padding: 10px 10px;
					.cultivate-left {
						padding: 5px 10px;
						margin-right: 50px;
						background: url('~@assets/images/homeImages/Cultivatebg.png') no-repeat;
						background-size: 100% 100%;
					}
					.cultivate-right {
						padding: 5px 10px;
						margin-left: 50px;
						background: url('~@assets/images/homeImages/Cultivatebg.png') no-repeat;
						background-size: 100% 100%;
					}
				}
				.charts {
					height: 15vh;
				}
			}
			// "精品工程"样式
			.boutique {
				width: 100%;
				.boutique-left {
					width: 60%;
					height: 100%;
					img {
						width: 100%;
						height: 100%;
					}
				}
				.boutique-right {
					width: 20%;
					height: 100%;
					&-active {
						width: 100%;
						border: 1px solid blue;
					}
					&-item {
						box-sizing: border-box;
						width: 100%;
						height: 25%;
						img {
							width: 100%;
							height: 100%;
						}
					}
				}
			}
		}
		&-item:nth-child(2) .literal {
			padding: 0;
		}
	}

	.content-right {
		position: absolute;
		top: 100px;
		bottom: 5vh;
		right: 0;
		width: 25vw;
		z-index: 99;
		&-item {
			height: 27vh;
			margin: 0 2vh 0 2vh;
			.content-title {
				line-height: 3vh;
				font-size: 14px;
				text-indent: 1.5em;
				background: url('~@assets/images/homeImages/homeTitle.png') no-repeat;
			}
			.literal {
				height: 22vh;
				padding: 30px;
				background: url('~@assets/images/homeImages/border.png') no-repeat;
				background-size: 100% 100%;
				box-sizing: border-box;
				text-align: center;
				// "BIM获奖统计"样式
				.circleCharts {
					width: 100%;
					height: 100%;
				}
				// "BIM获奖情况"样式
				.winningStatue {
					font-size: 14px;
					.winningStatueSpan {
						font-size: 24px;
						font-weight: 700;
					}
					.el-icon-trophy {
						margin: 20px 30px;
						display: block;
						font-size: 60px;
						color: #e59b2a;
					}
				}
				// "BIM获奖照片"样式
				.winningPhoto-item {
					width: 30%;
					height: 100%;
					background-color: #fff;
				}
			}
		}
	}
}
</style>
